<template>
  <div class="home">
    <div
      class="nav"
      :class="[
        { active: scrolltop > 80 },
        { flex: scrolltop < 80 && scrolltop > 10 },
      ]"
    ></div>
    <van-loading size="39px" vertical type="spinner" v-if="!homelist"
      >加载中...</van-loading
    >

    <van-tabs
      v-else
      v-model="active"
      animated
      swipeable
      :title-active-color="scrolltop < 80 && active == 0 ? '#fff' : '#000'"
      :title-inactive-color="scrolltop < 80 && active == 0 ? '#fff' : '#000'"
    >
      <van-tab v-for="(item, index) in title" :key="index" :title="item">
        <RecomMend
          v-show="active == 0"
          :bannerImg="bannerImg"
          :homelist="homelist"
        />
        <RankList v-show="active == 1" />
        <SortList v-show="active == 2" />
      </van-tab>
    </van-tabs>
    <router-link
      tag="span"
      to="/search"
      class="search iconfont icon-sousuo"
      :class="{ con: scrolltop < 80 && active == 0  }"
    ></router-link>
    <FootCom />
  </div>
</template>

<script>
import FootCom from "../components/FootCom.vue";

import RecomMend from "../components/RecomMend";
import RankList from "../components/RankList";
import SortList from "../components/SortList";
export default {
  data() {
    return {
      active: 0,
      title: ["推荐", "排行", "分类"],
      bannerImg: [],
      homelist: [],
      scrolltop: 0,
    };
  },
  methods: {
    getScroll() {
      this.scrolltop = Math.ceil(document.documentElement.scrollTop); //获取当前滚动高度
     
    },
  },
  created() {
    //首页轮播图
    this.axios.get("/Banner").then((res) => {
      // console.log(res);
      this.bannerImg = res.data.data;
      // console.log(this.bannerImg);
    });

    //首页推荐列表
    this.axios
      .get("/GetClassPageSixComics?id=136&pageNum=1&pageSize=15&isAll=0")
      .then((res) => {
        // console.log(res);
        this.homelist = res.data.data.roll_six_comics;
        // console.log(this.homelist);
      });
  },
  mounted() {
    // this.getScroll();
    window.addEventListener("scroll", this.getScroll);
  },

  components: {
    RecomMend,
    RankList,
    SortList,
    FootCom,
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    opacity: 0;
    // z-index: -100;
    z-index: 10;
  }
  .flex {
    opacity: 0.5;
  }
  .active {
    opacity: 1;
  }
  .van-tabs::v-deep .van-tab--active {
    font-size: 18px;
    font-weight: bold;
  }
  .van-tabs::v-deep .van-tabs__line {
    width: 0;
    height: 0;
    background-color: none;
  }
  .van-tabs::v-deep .van-tabs__nav--line {
    padding-bottom: 0;
  }
  // .van-tabs::v-deep .van-tabs__nav--line{
  //   }
  .van-tabs::v-deep .van-tabs__nav {
    background-color: rgba(0, 0, 0, 0);

    padding-right: 50px;
  }
  .van-tabs::v-deep .van-tabs__wrap {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
    // opacity: 1;
    // background-color: none;
    // background-color: rgba(0, 0, 0, 0);
    // background-color: red;
    color: #fff;
    height: 42px;
  }
  .search {
    position: fixed;
    top: 10px;
    right: 20px;
    font-size: 20px;
    color: #000;
    font-weight: bold;
    z-index: 10;
  }
  .con {
    color: #fff;
  }
  .van-loading--vertical {
    margin-top: 300px;
  }
}
</style>